<template>
  <div>
    <basic-page-vxe
      ref="basePage"
      list-api="querySysTenant"
      del-api="deleteSysTenant"
      export-api="exportSysTenant"
      :export-name="$route.meta.title"
      :search-form="basicData.searchForm"
      :search-handle="basicData.searchHandle"
      :search-other-data="basicData.searchData"
      :columns="basicData.columns"
    />
    <el-dialog :close-on-click-modal="false" :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
      <el-form ref="dataForm" :rules="rules" :model="temp" label-width="90px" style="width: 100%">
        <el-form-item label="租户编码" prop="tenantCode">
          <el-input v-model="temp.tenantCode" placeholder="请输入" :disabled="dialogStatus==='update'" maxlength="64" clearable />
        </el-form-item>
        <el-form-item label="租户名称" prop="tenantName">
          <el-input v-model="temp.tenantName" placeholder="请输入" maxlength="64" clearable />
        </el-form-item>
        <el-form-item label="联系人" prop="tenantContact">
          <el-input v-model="temp.tenantContact" placeholder="请输入" maxlength="64" clearable />
        </el-form-item>
        <el-form-item label="联系邮箱" prop="tenantEmail">
          <el-input v-model="temp.tenantEmail" placeholder="请输入" maxlength="100" clearable />
        </el-form-item>
        <el-form-item label="联系电话" prop="tenantTel">
          <el-input v-model="temp.tenantTel" placeholder="请输入" maxlength="20" clearable />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">
          确定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { addSysTenant, updateSysTenant } from '@/api/admin'

export default {
  name: 'SysTenant',
  data() {
    return {
      basicData: {
        columns: [
          { config: { title: '租户编码', field: 'tenantCode' }, type: 'copy' },
          { config: { title: '租户名称', field: 'tenantName' }, type: 'copy' },
          { config: { title: '联系人', field: 'tenantContact' }, type: 'copy' },
          { config: { title: '联系邮箱', field: 'tenantEmail' }, type: 'copy' },
          { config: { title: '联系电话', field: 'tenantTel' }},
          { config: { title: '创建日期', width: '180', field: 'createTime' }, type: 'time' },
          { config: { title: '操作', field: 'opt', width: '180' }, type: 'render',
            render: (h, scope) => {
              return (
                <div>
                  <el-button plain size='mini' type='primary' v-permission="'update'" onClick={() => this.handleUpdate(scope.row)}><i class='el-icon-edit'></i> 编辑</el-button>
                  <el-button plain size='mini' type='danger' v-permission="'delete'" onClick={() => this.$refs.basePage.handleDelete(scope.row)}><i class='el-icon-delete'></i> 删除</el-button>
                </div>
              )
            }
          }
        ],
        searchData: { },
        searchForm: [
          { type: 'Input', label: '租户编码', prop: 'tenantCode', width: '180px' },
          { type: 'Input', label: '租户名称', prop: 'tenantName', width: '180px' },
          { type: 'Input', label: '联系人', prop: 'tenantContact', width: '180px' }
        ],
        searchHandle: [
          { label: '新增', type: 'success', icon: 'el-icon-plus', permission: 'add', handle: () => { this.handleCreate() } }
        ]
      },
      tableKey: 0,
      temp: {
        id: undefined
      },
      multipleSelection: [],
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: '编辑',
        create: '新增'
      },
      rules: {
        tenantCode: [{ required: true, message: '请输入租户编码', trigger: ['blur', 'change'] }],
        tenantName: [{ required: true, message: '请输入租户名称', trigger: ['blur', 'change'] }],
        tenantEmail: [{ required: false, type: 'email', validator: this.checkTenantEmail, trigger: ['blur', 'change'] }]
      },
      downloadLoading: false
    }
  },
  created() {
  },
  methods: {
    resetTemp() {
      this.temp = {
        id: undefined
      }
    },
    handleCreate() {
      this.resetTemp()
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    createData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          addSysTenant(this.temp).then(response => {
            this.dialogFormVisible = false
            this.$message({
              message: '新增成功',
              type: 'success',
              duration: 2000
            })
            this.handleReset()
          })
        }
      })
    },
    handleUpdate(row) {
      this.temp = Object.assign({}, row) // copy obj
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    updateData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          // const tempData = Object.assign({}, this.temp)
          const tempData = {}
          tempData.id = this.temp.id
          tempData.tenantCode = this.temp.tenantCode
          tempData.tenantName = this.temp.tenantName
          tempData.tenantContact = this.temp.tenantContact
          tempData.tenantEmail = this.temp.tenantEmail
          tempData.tenantTel = this.temp.tenantTel
          updateSysTenant(tempData).then(response => {
            this.dialogFormVisible = false
            this.$message({
              message: '编辑成功',
              type: 'success',
              duration: 2000
            })
            this.handleReset()
          })
        }
      })
    },
    // 刷新
    handleReset() {
      this.$refs.basePage.getList()
    },
    checkTenantEmail(rule, value, callback) {
      if (value) {
        const reg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
        if (reg.test(value)) {
          callback()
        } else {
          return callback(new Error('邮箱格式不正确'))
        }
      } else {
        callback()
      }
    }
  }
}
</script>
